<template>
  <!-- 表单项 -->
  <template v-if="formInfo.level === 'form-item'">
    <!-- 只读 -->
    <ReadOnly
      v-if="_info.read_only && _info.field_type !== 'table'"
      :formInfo="formInfo"
      :topExpose="topExpose"
      v-bind="$attrs"
    />
    <!-- 可编辑 -->
    <FormItem
      v-else
      :formInfo="formInfo"
      :formData="formData"
      :imgListMap="imgListMap"
      :TrendsFormRef="TrendsFormRef"
      :topExpose="topExpose"
      v-bind="$attrs"
    />
  </template>

  <!-- 标题项 -->
  <div
    v-else
    :class="{
      'form-title': formInfo.level === 'bord-title',
      'form-title-2': formInfo.level === 'default-title'
    }"
  >
    <span>{{ _info.name }}</span>
    <zx-header-tip v-if="_info.tips"><div v-html="_info.tips" /></zx-header-tip>
  </div>

  <!-- 递归 切记传递所有props 不要传漏 -->
  <template v-if="formInfo.children?.length && formInfo.level !== 'form-item'">
    <TrendsContent
      v-for="item in formInfo.children.filter(it => !getInfo(it)?.hidden)"
      :key="getForKey(item)"
      :formInfo="item"
      :formData="formData"
      :imgListMap="imgListMap"
      :TrendsFormRef="TrendsFormRef"
      :topExpose="topExpose"
      v-bind="$attrs"
    />
  </template>
</template>

<script setup name="TrendsContent">
import ReadOnly from './Readonly';
import FormItem from './FormItem';
import { getInfo, getForKey } from './const';

const props = defineProps({
  formInfo: {
    type: Object,
    default: () => {}
  },
  formData: {
    type: Object,
    default: () => {}
  },
  imgListMap: {
    type: Object,
    default: () => {}
  },
  TrendsFormRef: {
    type: Object,
    default: null
  },
  topExpose: {
    type: Object,
    default: () => {}
  }
});

const _info = computed(() => getInfo(props.formInfo));
</script>

<style lang="scss" scoped></style>
